<template slot-scope="scope">
    <div id="idtable1" class="app-container" style="width: 99%; overflow: hidden; background: #ffffff; display: block; margin-left: 1%">
        <el-button id="idcloseclick" @click="closeDialog()" style="display: none"></el-button>
        <el-tabs type="border-card">
            <!-- 历史打卡记录 -->
            <el-tab-pane>
                <span slot="label" class="tabPaneLs"><i class="el-icon-lx-home"> </i><font class="lableFont"> 历史打卡记录</font></span>
                <div style="height: 8px"></div>
                <el-input v-model="searchXM" placeholder="请输入项目名称" class="input_search" @blur="historyCard()"></el-input>&nbsp;&nbsp;
                <el-button type="primary" @click="search()" class="bthSearch">搜索</el-button>
                <!-- <el-button plain @click="dels()" class="btnSearchAdv">高级查询</el-button> -->
                <el-button @click="newdiaglog('new_dk', '新增打卡')" class="bthNormal">新增</el-button>
                <el-button @click="getList()" class="bthNormal">刷新</el-button>
                <el-button @click="delsAll()" class="bthNormal">批量删除</el-button>
                <!-- <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="80%"
                    height="100%"
                    :before-close="handleClose"
                    >
                    <iframe src="/tabs" frameborder="0" width="100%" height="600px"></iframe>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog> -->
                <div style="height: 8px"></div>
                <div class="app-container">
                    <el-table
                        :data="list"
                        border
                        :row-style="{ height: '30px' }"
                        :header-cell-style="{ background: '#005ab5', color: 'black' }"
                        :row-class-name="rowClassName"
                        @selection-change="handleSectionChange"
                        style="font-size: 15px; font-family: microsoft yahei; color: black"
                    >
                        <el-table-column type="selection" width="50px" align="center" header-align="center"></el-table-column>
                        <el-table-column label="序号" prop="xh" width="70px" align="center" header-align="center"></el-table-column>

                        <el-table-column label="项目编号" prop="proCode" align="left" header-align="left"></el-table-column>
                        <el-table-column label="项目名称" prop="proName" align="left" header-align="left"></el-table-column>
                        <!-- <el-table-column label="项目类型" prop="proType" align="left" header-align="left"></el-table-column>
                        <el-table-column label="项目位置" prop="proInterval" align="left" header-align="left"></el-table-column> -->
                        <el-table-column label="打卡方" prop="cardUnit" align="left" header-align="left"></el-table-column>
                        <el-table-column label="打卡人员" prop="cardPerson" align="left" header-align="left"></el-table-column>
                        <el-table-column label="打卡时间" prop="cardTime" width="200px" align="left" header-align="left"></el-table-column>

                        <!-- 日志 -->
                        <el-table-column label="日志" prop="journal" width="200px" align="left" header-align="left"></el-table-column>
                        <el-table-column
                            label="操作"
                            prop="cz"
                            width="100px"
                            align="left"
                            header-align="left"
                            style="vertical-align: bottom; text-align: left; height: 10%"
                        >
                            <template slot-scope="scope">
                                <span style="cursor: pointer" @click="newdiaglog('dk', '打卡信息', scope.row.id)" class="fontNormal">
                                    修改
                                </span>
                                <span class="fontNormal" style="cursor: pointer" @click="dels(scope.row.id)"> 删除 </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-pagination
                    :current-page="page"
                    :page-size="limit"
                    :total="total"
                    style="padding: 30px 0; text-align: center"
                    background
                    layout="total, prev, pager, next, jumper"
                    @current-change="getList"
                />
            </el-tab-pane>

            <!-- 打卡情况统计 -->
            <el-tab-pane>
                <span slot="label" class="tabPaneTj"><i class="el-icon-lx-home"> </i><font class="lableFont"> 打卡情况统计</font></span>
                <div style="height: 8px"></div>
                <el-input v-model="searchtoday1" placeholder="请输入项目名称" class="input_search" @blur="today()"></el-input>&nbsp;&nbsp;
                <el-button type="primary" @click="searchtoday()" class="bthSearch">搜索</el-button>
                <el-button @click="newdiaglog('new_dk', '新增打卡')" class="bthNormal">新增</el-button>
                <el-button @click="getTodayList()" class="bthNormal">刷新</el-button>
                <el-button @click="delsAll()" class="bthNormal">批量删除</el-button>
                <div style="height: 8px"></div>
                <div class="app-container">
                    <el-table
                        :data="listxmzd"
                        border
                        :row-style="{ height: '30px' }"
                        :header-cell-style="{ background: '#005ab5', color: 'black' }"
                        :row-class-name="rowClassName"
                        @selection-change="handleSectionChange"
                        style="font-size: 15px; font-family: microsoft yahei; color: black"
                    >
                        <el-table-column type="selection" width="50px" align="center" header-align="center"></el-table-column>
                        <el-table-column label="序号" prop="xh" width="70px" align="center" header-align="center"></el-table-column>
                        <el-table-column
                            label="操作"
                            prop="cz"
                            width="100px"
                            align="left"
                            header-align="left"
                            style="vertical-align: bottom; text-align: left; height: 10%"
                        >
                            <template slot-scope="scope">
                                <span style="cursor: pointer" @click="newdiaglog('dk', '新增打卡', scope.row.id)" class="fontNormal">
                                    修改
                                </span>
                                <span class="fontNormal" style="cursor: pointer" @click="dels(scope.row.id)"> 删除 </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="项目代码" prop="proCode" align="left" header-align="left"></el-table-column>
                        <el-table-column label="项目名称" prop="proName" align="left" header-align="left"></el-table-column>
                        <el-table-column label="项目类型" prop="proType" align="left" header-align="left"></el-table-column>
                        <el-table-column label="项目位置" prop="proInterval" align="left" header-align="left"></el-table-column>
                        <el-table-column label="打卡方" prop="cardUnit" align="left" header-align="left"></el-table-column>
                        <el-table-column label="打卡人员" prop="cardPerson" align="left" header-align="left"></el-table-column>
                        <el-table-column label="打卡时间" prop="cardTime" width="200px" align="left" header-align="left"></el-table-column>

                        <!-- 日志 -->
                        <el-table-column label="日志" prop="journal" width="200px" align="left" header-align="left"></el-table-column>
                    </el-table>
                </div>
                <el-pagination
                    :current-page="page"
                    :page-size="limit"
                    :total="todaytotal"
                    style="padding: 30px 0; text-align: center"
                    background
                    layout="total, prev, pager, next, jumper"
                    @current-change="getTodayList()"
                />
            </el-tab-pane>
        </el-tabs>
        <el-dialog id="id_eldiaglog" :title="eldiaglog_title" :visible.sync="dialogVisible" width="80%" height="100%">
            <div id="iddivframe">
                <iframe id="idframe" src="" frameborder="0" width="100%" height="700px"></iframe>
            </div>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span> -->
        </el-dialog>
    </div>
</template>

<script>
import $ from 'jquery';
import information from '@/api/card/card';
export default {
    data() {
        return {
            eldiaglog_title: '',
            dialogVisible: false, //弹出框
            list: [],
            listxmzd: [],
            page: 1,
            limit: 10,
            total: 0,
            todaytotal: 0,
            courseQuery: {},
            tableChecked: [],
            tabledatas: [],
            searchXM: '',
            searchtoday1: ''
        };
    },
    created() {
        setTimeout(function () {
            setPaginationFontSize();
        }, 100);
        this.getList();
        this.getTodayList();
    },

    methods: {
        today() {
            if (this.searchtoday1 === '') {
                this.getTodayList();
            }
        },
        historyCard() {
            if (this.searchXM === '') {
                this.getList();
            }
        },
        // 关闭弹窗
        closeDialog() {
            this.dialogVisible = false;
            this.getList();
            this.getTodayList();
        },

        newdiaglog(stype, stitle, id) {
            this.dialogVisible = true;
            if ($('#idframe').attr('src') == undefined) {
                setTimeout(function () {
                    dialogFrameSrc(stype, id);
                }, 500);
            } else {
                dialogFrameSrc(stype, id);
            }
            this.eldiaglog_title = stitle;
        },
        newdaka() {
            this.dialogVisible = true;
        },
        rowClassName({ row, rowIndex }) {
            //row.xh = rowIndex + 1;
            row.xh = (this.page - 1) * 10 + 1 + rowIndex;
        },
        // 模糊查询历史
        search() {
            if (this.searchXM != '') {
                information.search(this.searchXM, this.page, this.limit).then((response) => {
                    this.list = response.data.rows;
                    this.total = response.data.total;
                });
            } else {
                this.getList();
            }
        },
        // 模糊查询查询当日
        searchtoday() {
            if (this.searchtoday1 != '') {
                information.searchtoday(this.searchtoday1, this.page, this.limit).then((response) => {
                    this.listxmzd = response.data.rows;
                    this.todaytotal = response.data.total;
                });
            } else {
                this.getTodayList();
            }
        },
        //跳转页面
        topage() {
            const { href } = this.$router.resolve({ path: '/document_form' });
            window.open(href, '_self');
        },
        //获取信息
        getList(page = 1) {
            this.page = page;
            information.page(this.page, this.limit).then((response) => {
                this.list = response.data.rows;
                for (var a = 0; a < this.list.length; a++) {
                    this.list[a].cardTime = this.rTime(this.list[a].cardTime);
                }
                this.total = response.data.total;
            });
        },
        // 当日打卡获取信息
        getTodayList(page = 1) {
            this.page = page;
            information.todaypage(this.page, this.limit).then((response) => {
                this.listxmzd = response.data.rows;
                // console.log(response.data.rows)
                for (var a = 0; a < this.listxmzd.length; a++) {
                    this.listxmzd[a].cardTime = this.rTime(this.listxmzd[a].cardTime);
                }
                this.todaytotal = response.data.total;
            });
        },
        // 删除单条记录
        dels(id) {
            var _this = this;
            _this
                .$confirm('此操作将删除记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {
                    //点击确定，执行then方法
                    //调用删除的方法
                    information.dels(id).then((rep) => {
                        this.getList();
                        this.getTodayList();
                    });
                }); //点击取消，执行catch方法
        },
        // 批量删除
        delsAll() {
            if (this.tableChecked.length == 0) {
                alert('请选择删除的项目');
            } else {
                var _this = this;
                _this
                    .$confirm('此操作将删除记录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                    .then(() => {
                        //点击确定，执行then方法
                        //调用删除的方法
                        for (let i = 0; i < this.tableChecked.length; i++) {
                            information.dels(this.tableChecked[i].id).then((res) => {
                                this.getList();
                                this.getTodayList();
                            });
                        }
                        this.badCodeSelection = [];
                    }); //点击取消，执行catch方法
            }
        },
        handleSectionChange(val) {
            this.tableChecked = val;
        },
        // 时间转换
        rTime(fmt) {
            return fmt;
        }
    }
};

function setPaginationFontSize() {
    if ($('.el-pagination__total').css('font-size') == '13px') {
        $('.el-pagination__total').css('font-size', '15px');
        $('.el-pagination__jump').css('font-size', '15px');
    } else {
        setTimeout(function () {
            setPaginationFontSize();
        }, 100);
    }
}
function dialogFrameSrc(stype, id) {
    switch (stype) {
        case 'dk':
            $('#iddivframe').html(
                '<iframe id="idframe" src="/?r=' +
                    Math.random() +
                    '/#/daka_input" data-id="' +
                    id +
                    '" frameborder="0" width="100%" height="600px"></iframe>'
            );
            break;
        case 'new_dk':
            alert('仅能在手机上打卡，电脑端只能补卡。');
            $('#iddivframe').html(
                '<iframe id="idframe" src="/?r=' + Math.random() + '/#/daka_input"  frameborder="0" width="100%" height="600px"></iframe>'
            );
            break;
    }
}
</script>

<style>
.el-table th {
    background-color: #e2e2e2 !important;
}
.el-table .cell {
    text-overflow: clip;
}
.input_search {
    width: 150px;
}
.divtitle {
    font-family: 微软雅黑;
    font-size: 25px;
    color: #356cb3;
}
.btnSearchAdv {
    border-color: #356cb3;
    color: #356cb3;
    font-size: 15px;
    font-family: 微软雅黑;
}
.bthSearch {
    background-color: #356cb3;
    font-size: 15px;
    font-family: 微软雅黑;
}
.bthNormal {
    border-color: #848484;
    font-size: 15px;
    font-family: 微软雅黑;
}
.el-tabs--border-card {
    border: 1px solid #ffffff;
}
.lableFont {
    font-size: 15px;
    font-family: 微软雅黑;
    color: black;
}

.tabPaneLs .el-icon-lx-home {
    background-image: url('../../../../assets/img/el-tab-pane-dkjl.png') !important;
    background-size: 100% 99%;
}
.tabPaneLs .el-icon-lx-home::before {
    visibility: hidden;
}

.tabPaneTj .el-icon-lx-home {
    background-image: url('../../../../assets/img/el-tab-pane-dktj.png') !important;
    background-size: 100% 99%;
}
.tabPaneTj .el-icon-lx-home::before {
    visibility: hidden;
}
.fontNormal {
    color: #356cb3;
    font-size: 15px;
    font-family: 微软雅黑;
}
.pageNormal {
    padding: 30px 0;
    text-align: center;
    font-size: 15px;
    font-family: 微软雅黑;
    color: black;
}

.el-pagination__total {
    color: #000000;
    font-family: 微软雅黑;
}
.el-pagination__jump {
    color: #000000;
    font-family: 微软雅黑;
}
</style>